<!DOCTYPE html>
<html lang="zh-CN" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚光灯</title>
    
    <style>
        body{
            /* 设置页面外边距为0 */
            margin: 0;
            /* 设置页面内边距为0 */
            padding: 0;
            /* 设置背景颜色为黑色 */
            background-color: black;
            /* 使用flex布局 */
            display: flex;
            /* 水平居中对齐 */
            justify-content: center;
            /* 垂直居中对齐 */
            align-items: center;
            /* 设置最小高度为视窗高度 */
            min-height: 100vh;
        }

        h1{
            /* 设置元素的外边距为0，用于消除浏览器默认的外边距 */
            margin: 0;
            /* 设置元素的内边距为0，用于消除浏览器默认的内边距 */
            padding: 0;
            /* 设置文本颜色为黑色，以提供清晰的可读性 */
            color: rgb(85, 82, 82);
            /* 设置字体大小为8rem，使用相对单位以便于响应式设计 */
            font-size: 10rem;
            /* 设置字间距为-0.3rem，使文本更加紧凑 */
            letter-spacing: -0.3rem;
            /* 设置元素的位置为相对定位，为其内的绝对定位元素提供定位上下文 */
            position: relative;
        }

        h1::after{
            content: attr(data-text);
            color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            clip-path: circle(120px at 0px 50%);
            animation: movelight 5s infinite;
            background-image: url('./聚光灯1.png');
            background-clip: text;
        }

        @keyframes movelight{
            0%{
                clip-path: circle(120px at 0% 50%);
            }

            50%{
                clip-path: circle(120px at 100% 50%);
            }

            100%{
                clip-path: circle(120px at 0% 50%);
            }
        }
    </style>

</head>
<body>
    <h1 data-text="Hello World">Hello World</h1>
    
    <!-- <script>
        let h1 = document.querySelector('h1');

        let style = document.createElement('style');
        h1.addEventListener('mousemove', function(e){
            let x = e.clientX;

            style.textContent = `
            h1::after {
                clip-path: circle(120px at ${x-200}px 50%);
            }
        `;

        document.head.appendChild(style);
        });

    </script> -->
</body>
</html>